<template>
	<view>
		<view class="container">
			<view class="list-item column" style="">
				<view class="row" style="align-items: center;justify-content: space-between;">
					<text class="" style="margin-top: 20rpx;">
						可用云豆
					</text>
					<view class="row align-items-center" @click="$refs.popup.open()">
						<zywork-icon  type="icon-bangzhu" size="50" color="#fff"></zywork-icon>
						<text style="color: #FFFFFF;">查看提现规则</text>
					</view>
				</view>
				<text style="font-size: 76rpx;margin-top: 35rpx;">
					{{amount}}
				</text>
				<text style="margin-top: 10rpx;">
					冻结云豆：{{freezeAmount}}
				</text>
			</view>
		</view>
		<information-ad :adpid="adpid" style="width: 90%;margin: 0rpx auto;" v-if='!withdrawalShow && !adShow&&iosStatus'/>
		<view class="global-button"
			style="position: fixed;  top:80%; left: 50%;transform: translate(-50%, -50%);background: #4BA22F;"
			@click="$refs.withdraw.open()">
			提现
		</view>
		
		<view class="global-button"
			style="position: fixed;  top:90%; left: 50%;transform: translate(-50%, -50%);background: #FFFFFF;color: #4BA22F;border: solid 1rpx #4BA22F;"
			@click="$refs.alertDialog.open()">
			联系客服
		</view>
		
		<uni-popup ref="alertDialog" type="dialog" @maskClick="closeDialog" @change="popupWithdrawalShow">
			<uni-popup-dialog type="warning" title="客服电话" :buttonArr="['取消','拨打']" :content="phoneNumber"
				@confirm="dialogConfirm" ></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="withdraw" type="bottom" @change="popupShow">

			<view class="column withdraw" style="position: relative;">
				<view class="row withdraw-top" style="">
					<zywork-icon @click="$refs.withdraw.close()" type="icon-zuojiantou" color="#fff" size="40">
					</zywork-icon>
					<image src="/static/user-my.jpg"
						style="width: 100rpx;height: 100rpx;margin-left: 30rpx;border-radius: 50%;" mode="">
					</image>
					<view class="column" style="width: 300rpx;margin-left: 30rpx;">
						<view class="row">
							<text>我的云豆</text>
							<zywork-icon style="transform: rotate(20deg);" type="icon-querenwanbi" color="#57BE68"
								size="40"></zywork-icon>
						</view>
						<text style="font-size: 50rpx;">{{totalPoints}}</text>
					</view>
					<view class="column align-items-center" style="margin-left: auto;">
						<text @click="$refs.record.open()">查看记录</text>
						<text style="margin-top: 15rpx;">已提现{{depositCount}}次</text>
					</view>
				</view>
				<view  v-show="moneyArr.length>0&&moneyArr[moneyArrIndex].lmDeposit.amountValue>50" class="row" style="align-items: center;margin: 15rpx 0rpx;padding: 0rpx 35rpx;">
					<text style="color: #000000;">提现到</text>
					<radio-group  class="row align-items-center"  @change="radioChange">
						<view style="margin-left: 30rpx;" :key="index" v-for="(item,index) in withdrawalCategory" class="row align-items-center">
							<radio color="#ff0000" :value="item.value" :checked="index === current" />
							<text style="color: #000000;">{{item.name}}</text>
						</view>
					</radio-group>
				</view>
				<scroll-view scroll-y >
					<view class="row"  style="flex-wrap: wrap;align-items: center;height: 450rpx;flex: 1;">
						<view v-if="moneyArr.length>0"  v-for="(item,index) in moneyArr" :key="index"    @click="moneyArrIndex=index"
							class="row withdraw-item align-items-center"
							:style="item.flag&&item.currentDay?'background-color: #FEFAF6;':'background-color: #ececec;'">
							<!-- <view >
								<view>
									<text style="color: #986A47;">{{item.amountValue}}元</text>
								</view>
								<view style="color: #986A47;font-size: 30rpx;">需要{{item.scoreValue}}云豆</view>
							</view>
							<view v-show="moneyArrIndex==index" class="triangle-bottomright row align-items-center">
								<zywork-icon style="transform: rotate(-90deg);margin-left: 40rpx;margin-bottom: 35rpx;"
									type="icon-jianchaqueren-kuai" size="30" color="#fff"></zywork-icon>
							</view> -->
							<view>
								<view>
									<text  :style="item.flag&&item.currentDay?'color: #986A47;':'color: #b6b6b6;'">{{item.lmDeposit.amountValue}}元</text>
								</view>
								<view :style="item.flag&&item.currentDay?'color: #986A47;':'color: #b6b6b6;'" style="font-size: 30rpx;">{{item.lmDeposit.name}}</view>
							</view>
							<!-- <view  v-else-if="item.type === 2" @click="$refs.inputDialog.open()">
								<view>
									<view>
										<text style="color: #986A47;">{{item.name}}元</text>
									</view>
									<view style="color: #986A47;">自定义提现金额</view>
								</view>
							</view> -->
							<view v-show="moneyArrIndex==index" class="triangle-bottomright row align-items-center">
								<zywork-icon style="transform: rotate(-90deg);margin-left: 40rpx;margin-bottom: 35rpx;"
									type="icon-jianchaqueren-kuai" size="30" color="#fff"></zywork-icon>
							</view>
							
						</view>
					</view>
				</scroll-view>
				<view class="" style="text-align: center;color: #ff0000;font-size: 30rpx;margin-top: 15rpx;">
					可上下滑动查看提现选项
				</view>
				<view class="row align-items-center withdraw-button" style="">
					<zywork-icon style="transform: rotate(20deg);" type="icon-querenwanbi" color="#ffffff" size="40">
					</zywork-icon>
					<text style="color: #FFFFFF;" @click="withdrawalWechat">立即提现到{{withdrawalCategory[current].name}}</text>
				</view>
				<view class="withdraw-button-1" @click="bindWechatTap">
					<text style="color: #8D5A33;">{{!bindWechat?'立即绑定微信':'重新绑定微信'}}</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="record" type="center" @change="popupWithdrawalShow">
			<view class="record-item">
				<view class="title" style="">
					提现记录
				</view>
				<scroll-view scroll-y="true" style="height: 700rpx;" @scrolltolower="withdrawalListGet">
					<view class="column" style="padding: 0rpx 35rpx;" v-for="(item) in withdrawalList" :key="item.id">
						<view class="row record-list border-bottom"
							style="justify-content: space-between;align-items: center;">
							<view class="column">
								<view class="row " style="align-items: center;">
									<text>云豆换现金</text>
									<text class="icon-label"
										style="color: #FFFFFF;">
										{{statusNote[item.status]}}
									</text>
								</view>
								<text style="font-size: 24rpx;margin-top: 10rpx;">{{item.createTime}}</text>
							</view>
							<text style="font-size: 40rpx;font-weight: 800;">{{item.amount}}元</text>
						</view>
					</view>
					<view class="" style="text-align: center;padding: 50rpx 0rpx;color: #CCBEB0;">
						{{loading}}
					</view>
				</scroll-view>

			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center" :maskClick="false" @change="popupWithdrawalShow">
			<view class="column popup" >
				<scroll-view class="" scroll-y="true" style="height: 800rpx;">
					<view class="column popup1">
						<view class="" style="text-align: center;padding: 20rpx 0rpx;font-size: 50rpx;">
							提现规则
						</view>
						<text>1.提现需冻结{{frozenAmount.itemValue}}云豆，不足扣除现有云豆</text>
						<text>2.用户和代理商每天只能提现一次</text>
						<text>3.1元,5元,10元,50元,100元,150元每个账号只能提现一次,0.3元和200元每天能提且只能提现一次</text>
						<text>4.提现金额为：0.3元,1元,5元,10元,50元,100元,150元,200元</text>
						<text>5.提现机制</text>
						<text>①提现0.3元必须有300提现云豆</text>
						<text>②提现1元必须有1000提现云豆</text>
						<text>③提现5元必须有5000提现云豆</text>
						<text>④提现10元必须有10000提现云豆和邀请1个新用户</text>
						<text>⑤提现50元必须有50000提现云豆和邀请5个新用户</text>
						<text>⑥提现100元必须有100000提现云豆和邀请10个新用户</text>
						<text>⑦提现150元必须有150000提现云豆和邀请15个新用户</text>
						<text>⑧提现200元必须有200000提现云豆和邀请20个新用户</text>
					</view>
				</scroll-view>
				<view @click="closeBtn" :style="popupStatus?'background:linear-gradient(to right, #63c9ff, #60c4fa, #89dbf4);':''" class="global-button" style="margin: 20rpx auto;margin-top: 60rpx;">
					好的{{time>0?'('+time+')':''}}
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog" >
			<uni-popup-dialog
				inputType="number"
				@close="dialogClose"
				:buttonArr="['取消','确定']"
				ref="inputClose"
				mode="input"
				:title="title"
				value=""
				:beforeClose="true"
				@input="inputVal"
				placeholder="请输入提现金额"
				@confirm="dialogInputConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupDialog" type="dialog" >
			<uni-popup-dialog
				@close="dialogClose1"
				type="warning" :buttonArr="['取消','去绑定']" :content="content"
				@confirm="dialogInputConfirm1"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import informationAd from '@/components/ad/information-ad.vue'
	import AD from "@/common/advertising.js"
	export default {
		components: {
			informationAd
		},
		data() {
			return {
				withdrawalShow: false,
				adShow: false,
				loading: '...',
				totalPoints: 0,
				depositCount: 0,
				bindWechat: false,
				moneyArr: [],
				moneyArrIndex: 0,
				withdrawal: false,
				withdrawalList: [],
				withdrawalListQuery: {
					pageNum: 1
				},
				statusNote: {
					0: "审核中",
					1: "已入账",
					2: "提现失败",
					3: "驳回"
				},
				frozenAmount:{},//云豆冻结数量字典信息
				withdrawalMinAmount:{},//自定义提现最小金额字典信息
				quantity:"",
				title:"",
				withdrawalCategory:[
					{
						name:"微信",
						value:2
					},
					{
						name:"银行卡",
						value:3
					}
				],
				current:0,
				adpid:1862455929,
				iosStatus:0 ,//ios审核时后台字典设置成0不显示
				identityCardStatus:false,
				content:"",
				cardNo:"",
				popupStatus:false,
				time:10
			};
		},
		created() {
			this.ref()
			this.withdrawalListGet()
			this.phoneNumber = this.$util.PHONE_NUMBER
		},
		onShow() {
			this.$util.accessPage(3)
			this.getFrozenAmount()
			this.getWithdrawalMinAmount();
			this.iosStatus = uni.getStorageSync("iosStatus")
			this.isAndroid = getApp().globalData.isAndroid;
			let screenHeight = uni.getSystemInfoSync().screenHeight
			if(this.iosStatus&&!this.isAndroid){
				this.adpid = 1433206601
			}
			if(screenHeight>680){//屏幕高度大于780的才展示视频广告
				this.adpid = 1416087346;
				if(this.iosStatus&&!this.isAndroid){
					this.adpid = 1550514157
				}
			}
			if(!uni.getStorageSync("popupStatus")){
				setTimeout(()=>{
					this.popupStatus = true
					this.$refs.popup.open()
					let time = setInterval(()=>{
						this.time--
						if(this.time===0){
							clearInterval(time);
							this.popupStatus = false
							uni.setStorageSync("popupStatus",true)
						}
					},1000)
					
				},500)
			}else {
				this.time = 0;
			}
			this.verificationIdentityCard()
		},
		computed:{
			withdrawalRulesId() {
				const moneyArrIndex = this.moneyArrIndex
				if (moneyArrIndex !== null) return this.moneyArr[moneyArrIndex].lmDeposit.id
				return null
			},
			amount(){
				return this.totalPoints>=this.frozenAmount.itemValue?this.totalPoints-this.frozenAmount.itemValue:0
			},
			freezeAmount(){
				return this.frozenAmount.itemValue>=this.totalPoints?this.totalPoints:this.frozenAmount.itemValue
			}
		},
		watch:{
			moneyArrIndex(index){
				if(this.moneyArr[index].lmDeposit.amountValue<=50){
					this.current = 0;
				}
			}
		},
		methods: {
			closeBtn(){
				if(!this.popupStatus){
					this.$refs.popup.close()
				}
			},
			withdrawDeposit() {
				uni.navigateTo({
					url: "/pages/user/paylist/paylist?source=1"
				})
			},
			radioChange(evt) {
				for (let i = 0; i < this.withdrawalCategory.length; i++) {
					if (this.withdrawalCategory[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			//查询是否实名认证
			verificationIdentityCard(){
				this.$util.doPostJson("/wx/saveSFZ", {}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						console.log("身份证验证",res.data)
						if(!res.data.data){
							this.content = "您还未进行实名认证绑定"
						}else {
							this.identityCardStatus = true
						}
					}else {
						
					}
				}).catch(error => {
					console.log(error)
				})
			},
			dialogClose1() {
			},
			dialogInputConfirm1(){
				uni.navigateTo({
					url:"/pages/user/certification/certification"
				})
			},
			inputVal(val){
				console.log("提现金额",val)
				this.title = "需"+parseInt(val)*1000+"云豆"
			},
			dialogInputConfirm(val) {
				console.log("提现金额",val)
				if(!val){
					val = 0
				}
				this.withdrawalAmount = parseInt(val)
				this.customWithdrawalWechat();
			},
			//查询冻结云豆数量
			getFrozenAmount(){
				this.$util.doGet("/dict/getDictItemByName?dictCode=frozenAmount&itemName=amount", {}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						this.frozenAmount = res.data.data 
						this.frozenAmount.itemValue = parseInt(this.frozenAmount.itemValue)
					}
				}).catch(error => {
					console.log(error)
				})
			},
			//查询自定义提现最小提现金额
			getWithdrawalMinAmount(){
				this.$util.doGet("/dict/getDictItemByName?dictCode=withdrawalMinAmount&itemName=minAmount", {}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						this.withdrawalMinAmount = res.data.data 
						this.withdrawalMinAmount.itemValue = parseInt(this.withdrawalMinAmount.itemValue)
						console.log("提现规则",this.withdrawalMinAmount)
					}
				}).catch(error => {
					console.log(error)
				})
			},
			showRewardedVideoAd() {
				// 调用后会显示 loading 界面
				let adpid = 1169907004
				if(this.iosStatus&&!this.isAndroid){
					adpid = 1644780982
				}
				let options = {
					adpid: adpid, // HBuilder 基座测试广告位
					adType: "FullScreenVideo"
				}
				AD.show(options, (res) => {
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded) {
						// 正常播放结束
						
					} else {
						// 播放中途退出
						console.log("onClose " + res.isEnded);
					}
				}, (err) => {
					// 广告加载错误
					console.log(err)
				})
			},
			ref() {
				this.getUserInfo()
				this.queryUserDepositCount()
				this.isBindWechat()
				this.getDepositList()
			},
			closeDialog() {
				this.$refs.alertDialog.close()
			},
			dialogConfirm() {
				console.log('拨打电话')
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber.replace(/\s+/g,"-")
				});
			},
			dialogClose() {
				this.$refs.inputDialog.close()
				this.title = ""
				this.moneyArrIndex = null
			},
			popupShow({
				show
			}) {
				this.adShow = show
				if(this.adShow&&this.iosStatus){
					if(this.$environment !== 'dev'){
						this.showRewardedVideoAd()
					}
				}
			},
			popupWithdrawalShow({
				show
			}) {
				this.withdrawalShow = show
				console.log("提现记录更新",this.withdrawalShow)
				if(this.withdrawalShow){
					this.withdrawalListGet()
				}
			},
			bindWechatTap() {
				const _this = this
				uni.login({
					provider: 'weixin',
					fail(res) {
						console.warn(res)
						_this.$util.showInfoToast(`登录失败`)
					},
					success: function(loginRes) {
						console.log(loginRes.authResult);
						uni.getUserInfo({
							provider: 'weixin',
							success({
								userInfo: {
									openId,
									nickName,
									gender,
									city,
									province,
									country,
									avatarUrl,
									unionId
								}
							}) {
								console.log('用户', openId);
								_this.$util.wxBingWithdrawalSubmit({
									wxOpenid: openId,
									wxSex: gender,
									wxCity: city,
									wxProvince: province,
									wxCountry: country,
									wxHeadimgurl: avatarUrl,
									nickname: nickName,
									unionid: unionId
								}).then(({
									data: {
										code,
										message
									}
								}) => {
									if (code === 200) {
										_this.$util.showInfoToast(`绑定成功`)
										_this.ref()
									} else {
										_this.$util.showInfoToast(message)
									}
								}).catch(err => {
									console.error(err)
									_this.$util.showInfoToast(`绑定失败`)
								})
							},
							fail(res) {
								console.warn(res)
								_this.$util.showInfoToast(`登录失败`)
							}
						});
					}
				});

			},
			async withdrawalListGet() {

				this.loading = `正在加载`

				const withdrawalListQuery = this.withdrawalListQuery
				const {
					data: {
						data: {
							list,
							pageNum
						},
					}
				} = await this.$util.queryUserDeposit(withdrawalListQuery)

				if (withdrawalListQuery.pageNum === pageNum) {
					this.withdrawalList = [...this.withdrawalList, ...list]
					withdrawalListQuery.pageNum++
					this.loading = `下拉加载更多`
				} else {
					this.loading = `没有更多了`
				}
			},
			async customWithdrawalWechat() {
				if (!this.bindWechat) {
					this.$util.showInfoToast(`请先绑定微信提现账户`)
					return
				}
				if (this.withdrawal) return
				try {
					this.withdrawal = true
					const withdrawalRulesId = this.withdrawalRulesId
					if (!withdrawalRulesId) {
						this.$util.showInfoToast(`请选择提现金额`)
						return
					}
					let parameter = {
						ruleId: withdrawalRulesId
					}
					if(this.amount < this.moneyArr[this.moneyArrIndex].scoreValue&&this.moneyArr[this.moneyArrIndex].type===1){
						this.$util.showInfoToast(`云豆不足`)
						return
					}
					if( this.withdrawalAmount*1000 > this.amount &&this.moneyArr[this.moneyArrIndex].type===2){
						this.$util.showInfoToast(`云豆不足`)
						return
					}
					if(this.moneyArr[this.moneyArrIndex].type === 2){
						parameter.amountValue = this.withdrawalAmount;
						console.log("提现金额",this.withdrawalMinAmount.itemValue)
						console.log("提现金额1",this.withdrawalAmount)
						if(this.withdrawalAmount < this.withdrawalMinAmount.itemValue){
							this.$util.showInfoToast('最低提现金额，'+this.withdrawalMinAmount.itemValue+'元起提')
							return
						}
					}
					if(this.amount < this.moneyArr[this.moneyArrIndex].scoreValue){
						this.$util.showInfoToast(`云豆不足`)
						return
					}
					const {
						data: {
							code,
							message
						}
					} = await this.$util.doPostForm(`/wx/withdrawalByAmount`, parameter, {}, true)
			
					if (code === 200) {
						this.$util.showInfoToast(message)
						if(this.$refs.inputDialog){
							this.$refs.inputDialog.close()
							this.title = ""
							this.moneyArrIndex = null
						}
						this.ref()
					} else {
						this.$util.showInfoToast(message)
					}
				} finally {
					this.withdrawal = false
				}
			
			},
			async withdrawalWechat() {
				if(this.moneyArr[this.moneyArrIndex].lmDeposit.amountValue>50){
					if(!this.identityCardStatus){
						this.$refs.popupDialog.open()
						return
					}
				}
				if(!this.moneyArr[this.moneyArrIndex].flag||!this.moneyArr[this.moneyArrIndex].currentDay){
					return
				}
				if(this.moneyArr[this.moneyArrIndex].lmDeposit.inviteeCount){
					if(this.moneyArr[this.moneyArrIndex].inviteeCount<this.moneyArr[this.moneyArrIndex].lmDeposit.inviteeCount){
						this.moneyArr[this.moneyArrIndex].type = this.withdrawalCategory[this.current].value
						this.moneyArr[this.moneyArrIndex].cardNo = this.cardNo
						uni.navigateTo({
							url:"/pages/user/my-integral/user-invitation?moneyArr="+JSON.stringify(this.moneyArr[this.moneyArrIndex])
						})
						return
					}
				}
				if(this.withdrawalCategory[this.current].value ===3&&!this.cardNo){
					this.withdrawDeposit();
					return
				}
				// if(!this.invitationStatus&&this.iosStatus){
				// 	uni.navigateTo({
				// 		url:"/pages/user/my-integral/user-invitation"
				// 	})
				// 	return
				// }
				if (!this.bindWechat) {
					this.$util.showInfoToast(`请先绑定微信提现账户`)
					return
				}
				if (this.withdrawal) return
				try {
					this.withdrawal = true
					const withdrawalRulesId = this.withdrawalRulesId
					if (!withdrawalRulesId) {
						this.$util.showInfoToast(`请选择提现金额`)
						return
					}
					let parameter = {
						id: withdrawalRulesId,
						type:this.withdrawalCategory[this.current].value,
					}
					if(parameter.type === 3){
						parameter.cardNo = this.cardNo
					}
					
					const {
						data: {
							code,
							message
						}
					} = await this.$util.withdrawalWechatById(parameter)

					if (code === 200) {
						this.$util.showInfoToast(`提现成功`)
						this.moneyArrIndex = null
						this.ref()
					} else {
						this.$util.showInfoToast(message)
					}
				} finally {
					this.withdrawal = false
				}
			},
			async getUserInfo() {
				const {
					data: {
						data: {
							totalPoints
						},
					}
				} = await this.$util.getUserInfo()

				console.log(totalPoints)
				this.totalPoints = totalPoints
			},
			async getDepositList() {
				this.$util.doPostJson("/wx/withdrawalEcho", {}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						console.log("提现规则列表",res.data)
						this.moneyArr = res.data.data
					}
				}).catch(error => {
					console.log(error)
				})
			},
			async queryUserDepositCount() {
				const {
					data: {
						data: {
							total
						},
					}
				} = await this.$util.queryUserDeposit()

				console.log(total)
				this.depositCount = total
			},
			async isBindWechat() {
				const {
					data
				} = await this.$util.isBindWechat()

				console.log(data)
				this.bindWechat = data
			}
		},
		onNavigationBarButtonTap(e) {
			this.$refs.record.open()
		}
	}
</script>

<style lang="scss">
	
	.withdrawal-text{
		color: #000000;
	}
	
	.icon-label{
		font-size: 22rpx;
		color: #FFFFFF;
		background-color: #55BD68;
		padding: 0rpx 10rpx;
		border-radius: 15rpx;
	}
	
	.popup {
		width: 650rpx;
		padding: 40rpx 30rpx;
		height: 950rpx;
		border-radius: 35rpx;
		background-color: #FFFFFF;
		// color: #FFFFFF;
		// text{
		// 	color: #F1F1F1;
		// }
	}
	
	.popup1 {
		border-radius: 35rpx;
		background-color: #FFFFFF;
		// color: #FFFFFF;
		// text{
		// 	color: #F1F1F1;
		// }
	}
	
	.container {
		padding: 35rpx 30rpx;

		.list-item,
		.column {
			height: 270rpx;
			background-color: #4BA22F;
			border-radius: 15rpx;
			padding: 20rpx 30rpx;

			text {
				color: #FFFFFF;
			}
		}
	}

	.record-item {
		width: 630rpx;
		background-color: #FFFFFF;
		border-radius: 35rpx;

		.title {
			width: 100%;
			text-align: center;
			padding: 30rpx 0rpx;
			border-bottom: solid 1rpx #eee;
			color: #93623D;
			padding-top: 60rpx;
			font-weight: 800;
			font-size: 40rpx;
		}

		.record-list {
			padding: 30rpx 0rpx;

			text {
				color: #A37C5C;
			}
		}

		.border-bottom {
			border-bottom: solid 1rpx #eee;
		}
	}

	.withdraw {
		height: 1050rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;

		text {
			color: #ececec;
		}

		.withdraw-top {
			background-color: #CE4031;
			align-items: center;
			padding: 20rpx 35rpx;
			border-top-left-radius: 35rpx;
			border-top-right-radius: 35rpx;
		}

		.withdraw-button {
			background-color: #5BB63A;
			width: 80%;
			padding: 30rpx 0rpx;
			border-radius: 50rpx;
			position: fixed;
			left: 50%;
			bottom: 160rpx;
			transform: translate(-50%, 0%);
		}

		.withdraw-button-1 {
			background-color: #ffffff;
			width: 80%;
			padding: 30rpx 0rpx;
			border-radius: 50rpx;
			position: fixed;
			left: 50%;
			bottom: 30rpx;
			transform: translate(-50%, 0%);
			text-align: center;
			border: solid 1rpx #E7DDD5;
		}

		.withdraw-item {
			width: 322rpx;
			height: 180rpx;
			background-color: #FEFAF6;
			border-radius: 35rpx;
			position: relative;
			z-index: 1;
			border: solid 1rpx #E7DDD5;
			margin-top: 30rpx;
			margin-left: 35rpx;

			.triangle-bottomright {
				position: absolute;
				z-index: 0;
				bottom: 0rpx;
				right: 0rpx;
				width: 90rpx;
				height: 90rpx;
				background: linear-gradient(45deg, transparent 50%, #CE3F31 0%);
				background-size: 100% 100%;
				border-top-right-radius: 35rpx;
				transform: rotate(90deg);
			}

			text {
				font-size: 60rpx;
			}
		}

	}
</style>

